﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dispatch_Screen.aspx.cs" Inherits="Views_Dispatch_Dispatch_Screen" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        Ext.require(['*']);

        Ext.onReady(function () {

            // sample static data for the store
            var data_import = [
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010']
        ];
            // sample static data for the store
            var data_export = [
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010'],
            ['1', '2010102524', 'ZCSU8795650', 'MAHER', '40', 'Not Entered', 'Not Available', 'Nov-08-2010', 'Nov-10-2010']
        ];

            /**
            * Custom function used for column renderer
            * @param {Object} val
            */
            function change(val) {
                if (val > 0) {
                    return '<span style="color:green;">' + val + '</span>';
                } else if (val < 0) {
                    return '<span style="color:red;">' + val + '</span>';
                }
                return val;
            }

            /**
            * Custom function used for column renderer
            * @param {Object} val
            */
            function pctChange(val) {
                if (val > 0) {
                    return '<span style="color:green;">' + val + '%</span>';
                } else if (val < 0) {
                    return '<span style="color:red;">' + val + '%</span>';
                }
                return val;
            }

            // create the data store
            var store_import = Ext.create('Ext.data.ArrayStore', {
                fields: [
               { name: 'no' },
               { name: 'jobid', type: 'string' },
               { name: 'containerno', type: 'string' },
               { name: 'port', type: 'string' },
               { name: 'size', type: 'string' },
               { name: 'line', type: 'string' },
               { name: 'destination', type: 'string' },
               { name: 'arrivaldate', type: 'string'},
               { name: 'lastfreeday', type: 'string'}
            ],
                data: data_import
            });

            var store_export = Ext.create('Ext.data.ArrayStore', {
                fields: [
               { name: 'no' },
               { name: 'jobid', type: 'string' },
               { name: 'containerno', type: 'string' },
               { name: 'port', type: 'string' },
               { name: 'size', type: 'string' },
               { name: 'line', type: 'string' },
               { name: 'destination', type: 'string' },
               { name: 'firstfreeday', type: 'string' },
               { name: 'lastfreeday', type: 'string' }
            ],
                data: data_export
            });

            // create the Grid
            var grid_import = Ext.create('Ext.grid.Panel', {
                hideCollapseTool: true,
                store: store_import,
                columnLines: true,
                columns: [
                {
                    text: 'No.',
                    width: 75,
                    sortable: false,
                    dataIndex: 'no'
                },
                {
                    text: 'Job ID',
                    width: 75,
                    sortable: true,                   
                    dataIndex: 'jobid'
                },
                {
                    text: 'Container No',
                    width: 75,
                    sortable: true,                    
                    dataIndex: 'containerno'
                },
                {
                    text: 'Port',
                    width: 75,
                    sortable: true,                    
                    dataIndex: 'port'
                },
                {
                    text: 'Size',
                    width: 75,
                    sortable: true,                   
                    dataIndex: 'size'
                },
                {
                    text: 'Line',
                    width: 75,
                    sortable: true,                    
                    dataIndex: 'line'
                },
                {
                    text: 'Destination',
                    width: 75,
                    sortable: true,                    
                    dataIndex: 'destination'
                },
                {
                    text: 'Arrival Date',
                    width: 85,
                    sortable: true,                   
                    dataIndex: 'arrivaldate'
                },
                {
                    text: 'Last Free Day',
                    width: 85,
                    sortable: true,                    
                    dataIndex: 'lastfreeday'
                }
            ],
                title: 'Import',
                viewConfig: {
                    stripeRows: true
                }
            });

            var grid_export = Ext.create('Ext.grid.Panel', {
                hideCollapseTool: true,
                store: store_export,
                columnLines: true,
                columns: [
                {
                    text: 'No.',
                    width: 75,
                    sortable: false,
                    dataIndex: 'no'
                },
                {
                    text: 'Job ID',
                    width: 75,
                    sortable: true,
                    dataIndex: 'jobid'
                },
                {
                    text: 'Container No',
                    width: 75,
                    sortable: true,
                    dataIndex: 'containerno'
                },
                {
                    text: 'Port',
                    width: 75,
                    sortable: true,
                    dataIndex: 'port'
                },
                {
                    text: 'Size',
                    width: 75,
                    sortable: true,
                    dataIndex: 'size'
                },
                {
                    text: 'Line',
                    width: 75,
                    sortable: true,
                    dataIndex: 'line'
                },
                {
                    text: 'Destination',
                    width: 75,
                    sortable: true,
                    dataIndex: 'destination'
                },
                {
                    text: 'First Free Day',
                    width: 85,
                    sortable: true,
                    dataIndex: 'firstfreeday'
                },
                {
                    text: 'Cut Off Date',
                    width: 85,
                    sortable: true,
                    dataIndex: 'cutoffdate'
                }
            ],
                title: 'Export',
                viewConfig: {
                    stripeRows: true
                }
            });

            var tabs2 = Ext.create('Ext.Panel', {                
                renderTo: document.getElementById('divImportExport'),                
                height: 390,
                plain: true,
                defaults: {
                    autoScroll: true,
                    bodyPadding: 10
                },
                items: [grid_import, grid_export]
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divDispatchScreen" style="padding:5px;">
        <asp:Label ID="Label3" runat="server" Text="Dispatch Screen" 
            Font-Bold="True" Font-Size="20px"></asp:Label>
        <div style="margin-bottom:5px;">
        <asp:Label ID="Label1" runat="server" Text="Please Select a Date:" 
            Font-Bold="True"></asp:Label>
    
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Update" />
        <asp:Label ID="Label2" runat="server" Text="- P.H. - Will be updated later."></asp:Label>
        </div>
        <div id="divImportExport"></div>   
        <div style="margin-top:10px;"><asp:Button ID="Button2" runat="server" Text="back" /></div>     
    </div>
    </form>
</body>
</html>
